import { Avatar, Button, Dropdown, Layout, Menu, message, Modal } from 'antd'
import {
  BrowserRouter as Router,
  Link,
  Route,
  Switch,
  useHistory,
} from 'react-router-dom'
import {
  UserOutlined,
  QuestionCircleOutlined,
  VerticalLeftOutlined,
  HighlightOutlined,
} from '@ant-design/icons'
import React, { useState } from 'react'
import './index.scss'
import useStores from 'Stores'
import Login from 'Pages/Login'
import { Store } from 'antd/lib/form/interface'
import { observer } from 'mobx-react'
import { route } from './route'
import Register from 'Pages/Register'

const { Header, Content, Footer } = Layout

const Home = () => {
  const [loginModal, setLoginModal] = useState(false) //登陆model
  const [accountModal, setAccountModal] = useState(false) //申请账号model
  const { root } = useStores()
  const history = useHistory()
  const [alertModal, setAlertModal] = useState(false)

  const onLogin = async (formData: Store) => {
    const res = await root.login(formData.userName, formData.password)
    if (res.success) {
      message.success('登陆成功！')
      console.log(root.isLogin);
      setLoginModal(false)
      return
    }
    message.error(`登陆失败！${res}`)
  }

  const onRegister = async (formData: Store) => {
    if(formData.password!==formData.trypassword){
      message.error(`密码不一致`)
      return
    }
    const res = await root.register(formData.userName, formData.password)
    if (res.affectedRows === 1) {
      message.success('注册成功')
      setAccountModal(false)
      return
    }
    message.error(`注册失败！${res}`)
  }

  

  const handleClickWrite = () => {
    if (root.isLogin) {
      history.push('/home/write_board')
      return
    }
    setAlertModal(true)
  }

  const dropdownMenu = (
    <Menu>
      <Menu.Item>
        <Link to="/home/user_center">
          <UserOutlined />
          用户中心
        </Link>
      </Menu.Item>
      <Menu.Item>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="http://www.taobao.com/"
        >
          <QuestionCircleOutlined />
          帮助
        </a>
      </Menu.Item>
      <Menu.Item
        onClick={() => {
          root.logout()
          message.success('您已经成功登出！')
        }}
      >
        <VerticalLeftOutlined />
        退出
      </Menu.Item>
    </Menu>
  )

  return (
    <>
      <Layout style={{ minHeight: '100vh' }}>
        <Header className="header">
          <div className="header-position">
            <div className="logo">
              <Link className="logo_link" to="/">
                <svg
                  style={{ width: 40, height: 40 }}
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1276"
                  width="200"
                  height="200"
                >
                  <path
                    d="M949.4634 395.524219 515.394307 104.847953l-1.605567-2.406816-0.995677 0.664126-0.929162-0.62217-1.50426 2.246157L74.5366 395.476123l0 172.018795 88.921215 0 1.656733 354.063945 326.929957 0 40.932248 0 330.271052 0-0.49835-354.063945 86.712921 0L949.462377 395.524219zM863.505679 481.536174l-86.834694 0 0.49835 354.063945-244.191558 0-40.932248 0L250.671133 835.600119l-1.656733-354.063945-88.520079 0 0-40.074717L512.703011 206.496028l350.802668 234.916311L863.505679 481.536174z"
                    p-id="1277"
                    fill="#d81e06"
                  ></path>
                  <path
                    d="M619.98848 595.156932c-18.137079-19.177781-51.812039-42.005696-107.476827-42.286082l0-0.013303c-0.172939 0-0.339738 0.00614-0.511653 0.00614-0.171915 0-0.338714-0.00614-0.511653-0.00614l0 0.013303c-55.664787 0.279363-89.338724 23.107277-107.475803 42.285059-39.993876 42.292222-40.295751 99.460246-39.880289 111.090121l0 172.33295 85.957721 0L450.089975 705.33631l0.090051-0.792039-0.073678-1.446955c-0.261966-8.868995 2.26253-34.263361 16.645099-49.178049 9.722432-10.080589 24.045649-15.018042 45.248553-15.096836 21.202904 0.079818 35.527145 5.016247 45.248553 15.096836 14.368242 14.899338 16.972557 40.254819 16.71673 49.148373l-0.056282 0.657986 0 174.853353 85.957721 0L659.866722 706.246029C660.283208 694.616154 659.982356 637.449153 619.98848 595.156932z"
                    p-id="1278"
                    fill="#d81e06"
                  ></path>
                </svg>
                <div className="top-title">社区广场</div>
              </Link>
             
            </div>     
            <Menu mode="horizontal" className="top-menu">
              <Menu.Item>
                <Button
                  type="primary"
                  onClick={() => handleClickWrite()}
                  icon={<HighlightOutlined />}
                  danger
                >
                  发表动态
                </Button>
              </Menu.Item>
              {root.isLogin ? (
                <Menu.Item>
                  <Dropdown overlay={dropdownMenu} placement="bottomLeft">
                    <Avatar
                      className="avatar"
                      size="large"
                      src={root.avator}
                    />
                  </Dropdown>
                </Menu.Item>
              ) : (
                <Menu.Item>
                  <Button
                    className="login_btn"
                    style={{margin:'12px'}}
                    type="primary"
                    onClick={() => setLoginModal(true)}
                  >
                    登录
                  </Button>
                  <Button
                    className="account_btn"
                    type="primary"
                    onClick={() => setAccountModal(true)}
                  >
                    注册
                  </Button>
                </Menu.Item>
              )}
            </Menu>
          </div>

          {/* </Menu> */}
        </Header>
        <Content className="window_content" style={{ marginTop: 30 }}>
          <Switch>
            {route.map((item, _) => {
              return (
                <Route
                  exact={item.exact}
                  path={item.path}
                  component={item.component}
                ></Route>
              )
            })}
          </Switch>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©2021 Created by Gong UED
        </Footer>
      </Layout>

      {/* 登陆Modal */}
      <Modal
        title="用户登陆"
        visible={loginModal}
        footer={false}
        onCancel={() => setLoginModal(false)}
      >
        <Login onLogin={onLogin} />
      </Modal>
       {/* 未登陆的Modal */}
      <Modal
        title={'提示'}
        visible={alertModal}
        footer={false}
        onCancel={() => setAlertModal(false)}
      >
        您当前未登录，请先登陆！
        <div style={{ textAlign: 'center' }}>
          <Button type="primary" onClick={() => setAlertModal(false)}>
            确定
          </Button>
        </div>
      </Modal>
      {/* 注册的Modal */}
      <Modal
        title="用户注册"
        visible={accountModal}
        footer={false}
        onCancel={() => setAccountModal(false)}
      >
        <Register onLogin={onRegister} />
      </Modal>

    </>
  )
}

export default observer(Home)
